<template>
  <div class="app-container">
    <div class="settle-manage">
      <el-form v-column="3" :model="dataFilter">

        <el-form-item label="所属行业" prop="industry">
          <el-select v-model="dataFilter.industry" placeholder="请选择所属行业">
            <el-option v-for="item in industryList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="商户名称">
          <el-input v-model="dataFilter.tenantName" placeholder="请输入" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="handleAdd">添加</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        <span style="margin-left: 10px; color: #909399; font-size: 14px;">
          已选择 {{ multipleSelection.length }} 条
        </span>
      </div>
      <el-table :data="sourceData.list" border highlight-current-row stripe row-key="id"
        @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" width="40" />
        <el-table-column label="商户名称" prop="tenantName" />
        <el-table-column label="联系人" prop="contactPerson" />
        <el-table-column label="联系电话" prop="customerPhone" />
        <el-table-column label="商户地址" prop="tenantAddress" />
        <el-table-column label="所属行业" prop="industry" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="操作" align="center" width="150">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)">
              详情
            </el-button>
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :pageProps="pageProps" layout="prev, pager, next" @current-change="getList" />
    </div>
  </div>

  <MerchantDialog ref="dialog" @listChange="itemData" />
  <MerchantExamineDialog ref="dialogExamine" @listChange="itemData" />
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMerchant, dellMerchant, getMerchantDetail } from '@/api/settle'
import { getDist } from '@/api/collect'
import Pagination from '@/components/Pagination/Index.vue'
import MerchantDialog from './components/MerchantDialog.vue'
import MerchantExamineDialog from './components/MerchantExamineDialog.vue'

const loading = ref(false)
const industryList = ref<any>([])
const dataFilter = reactive({
  orgId: undefined,
  industry: '',
  tenantName: undefined,
})

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

const sourceData = reactive({
  list: [] as any,
})

onMounted(() => {
  getDistData()
  getList()
})

const getDistData = () => {
  getDist('DC00012')
  .then((res: any)=>{
    industryList.value = res.data
  })
}

const getList = () => {
  loading.value = true;
  getMerchant({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...dataFilter
  }).then((res)=>{
    loading.value = false;
    sourceData.list = res.data.records
    // use real api total res total
    pageProps.value.total = res.data.total
  })
  .catch((err) => {
    loading.value = false;
    console.error('err', err)
  })
}

const handleSearch = () => {
  getList()
}

const onReset = () => {
  dataFilter.orgId = undefined
  dataFilter.industry = ''
  dataFilter.tenantName = undefined
  Object.assign(pageProps.value, {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  })
  getList()
}

const dialog: any = ref(null)

const handleAdd = () => {
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'create'
  dialog.value.isDisabled=true
}

const handleView = (row: any) => {
  console.log('row', row)
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'view'
  dialog.value.isDisabled=false
  nextTick(()=>{
    getMerchantDetail(row.id)
    .then((res)=>{
      console.log('res', res)
      Object.assign(dialog.value.tableItem, res.data)
      dialog.value.tableItem.businessScenario=res.data.businessScenario.split(',')
      if (res.data.businessLicensePic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.businessLicensePic,
          photoType: 'yyzz'
        })
      }
      if (res.data.legalPersonFrontPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.legalPersonFrontPic,
          photoType: 'frzm'
        })
      }
      if (res.data.legalPersonBackPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.legalPersonBackPic,
          photoType: 'frfm'
        })
      }
      if (res.data.superAdminFrontPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.superAdminFrontPic,
          photoType: 'glzm'
        })
      }
      if (res.data.superAdminBackPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.superAdminBackPic,
          photoType: 'glfm'
        })
      }
      if (res.data.authLetter) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.authLetter,
          photoType: 'ywhs'
        })
      }
      console.log('dialog.value.tableItem', dialog.value.tableItem)
    })
    .catch((err)=>{
      console.error('err', err)
    })
  })
}

const handleEdit = (row: any) => {
  dialog.value.dialogVisible = true
  dialog.value.dialogStatus = 'edit'
  dialog.value.isDisabled=true
  nextTick(()=>{
    getMerchantDetail(row.id)
    .then((res)=>{
      console.log('res', res)
      dialog.value.isDisabled = true
      Object.assign(dialog.value.tableItem, res.data)
      dialog.value.tableItem.businessScenario=res.data.businessScenario.split(',')
      if (res.data.businessLicensePic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.businessLicensePic,
          photoType: 'yyzz'
        })
      }
      if (res.data.legalPersonFrontPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.legalPersonFrontPic,
          photoType: 'frzm'
        })
      }
      if (res.data.legalPersonBackPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.legalPersonBackPic,
          photoType: 'frfm'
        })
      }
      if (res.data.superAdminFrontPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.superAdminFrontPic,
          photoType: 'glzm'
        })
      }
      if (res.data.superAdminBackPic) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.superAdminBackPic,
          photoType: 'glfm'
        })
      }
      if (res.data.authLetter) {
        dialog.value.tableItem.uploadPhotoDtoList.push({
          url: res.data.authLetter,
          photoType: 'ywhs'
        })
      }
      console.log('dialog.value.tableItem', dialog.value.tableItem)
    })
    .catch((err)=>{
      console.error('err', err)
    })
  })
}

const itemData = () => {
  getList()
}

const multipleSelection = ref<any>([])

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val.map(item=>item.id);
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {  
    const params = {
      idList: [row.id]
    }
    dellMerchant(params)
    .then((res: any) => {
      ElMessage.success('删除成功！')
      getList()
    })
    .catch((err: any) => {
      console.error('err', err.msg)
      ElMessage.success('删除失败！')
      getList()
    })
  })
  .catch(() => {})
}

const handleBatchDelete = () => {
  ElMessageBox.confirm(
    '确定要批量删除吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {  
    const params = {
      idList: multipleSelection.value
    }
    dellMerchant(params)
    .then((res: any) => {
      ElMessage.success('删除成功！')
      getList()
    })
    .catch((err: any) => {
      console.error('err', err.msg)
      ElMessage.success('删除失败！')
      getList()
    })
  })
  .catch(() => {})
}

</script>

<style lang="scss" scoped>
.app-container {
  flex: 1;
}
</style>
